<script setup lang="ts">
import {
  Card,
  CardHeader,
  CardTitle,
  CardFooter,
  CardContent,
} from "@/components/ui/card";

import { Button } from "@/components/ui/button";

import WeChat from "@/icons/WeChat.vue";
</script>

<template>
  <section
    id="community"
    class="py-12"
  >
    <hr />
    <div class="container py-20 sm:py-20">
      <div class="lg:w-[60%] mx-auto">
        <Card
          class="bg-background shadow-none text-center flex flex-col items-center justify-center border-0"
        >
          <CardHeader>
            <CardTitle class="text-4xl md:text-5xl font-bold">
              <!-- <Component>
                <span class="icon-[bi--wechat] w-20 h-20 m-auto mb-4"></span>
              </Component> -->
            
              <Component
                class="w-20 h-20 m-auto mb-4"
                :is="WeChat"
              />
              需要更多
              <span
                class="text-transparent bg-gradient-to-r from-[#D247BF] to-primary bg-clip-text"
              >
                帮助?
              </span>
            </CardTitle>
          </CardHeader>
          <CardContent class="lg:w-[80%] text-xl text-muted-foreground">
            可以在群内联系我们,所有问题都能够得到快速解决! 🚀
          </CardContent>

          <CardFooter>
            <Button as-child>
              <a
                href="http://ha.bazxj13.cn/t/E6Pr"
                target="_blank"
              >
                加入
              </a>
            </Button>
          </CardFooter>
        </Card>
      </div>
    </div>
    <hr />
  </section>
</template>
